<template>
  <a-card :bordered="false">
    <h3>审核相关配置</h3>
    <a-alert message="该菜单用于配置小程序端举报内容、后台审核内容/审核评论/禁用内容/禁用用户/禁用评论可选原因" type="info" />
    <ConfigFilter ref="filter" :type="1" @onAdd="handleAddOrEdit" @onSearch="onSearch"></ConfigFilter>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="status" slot-scope="text, record">
        <span v-if="record.status == 0">启用</span>
        <span v-if="record.status == 1">禁用</span>
      </span>
      <span slot="action" slot-scope="text, record, index">
        <a-icon type="arrow-up" @click="handleUp(index, record.id)" style="margin-bottom: 24px;margin-right: 25px;cursor: pointer;color: #1890FF;" />
        <a-icon type="arrow-down" @click="handleDown(index, record.id)" style="color: #1890FF;margin-bottom: 24px;cursor: pointer;" /><br />
        <a @click="handleAddOrEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗？" ok-text="删除" cancel-text="取消" @confirm="handleDelet(record.id)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </s-table>
    <a-modal :title="form.id ? '编辑': '新增'" :visible="visible" width="500px" @ok="handleSubmit" @cancel="handleCancel">
      <a-form-model ref="rulesForm" :labelCol="{ span: 5 }" :wrapperCol="{ span: 16 }" :model="form" :rules="rules">
        <a-form-model-item label="适用场景" prop="type">
          <a-select v-model="form.type" style="width: 100%;" show-search :filter-option="filterOption">
            <a-select-option :value="item.id" v-for="item in whyTypeList" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="原因" prop="whyName">
          <a-input v-model.trim="form.whyName" placeholder="最多8个字" :maxLength="8" allowClear />
        </a-form-model-item>
        <a-form-model-item label="启用状态" prop="status">
          <a-radio-group v-model="form.status">
            <a-radio :value="0">启用</a-radio>
            <a-radio :value="1">禁用</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-card>
</template>
<script>
import { whyPage, whyAdd, whyUpdate, whyDelete, whyModifySort } from '@/api/micromall/configManagement'
import { STable } from '@/views/box/components'
import ConfigFilter from '../../components/ConfigFilter'
import { whyTypeList } from '../../components/whyTypeList.js'
const columns = [
  {
    title: '原因',
    width: '380px',
    align: 'center',
    dataIndex: 'whyName'
  },
  {
    title: '适用场景',
    width: '200px',
    align: 'center',
    dataIndex: 'applyScenario'
  },
  {
    title: '启用状态',
    width: '180px',
    align: 'center',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '创建时间',
    width: '180px',
    align: 'center',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: '150px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    ConfigFilter,
    STable
  },
  data() {
    return {
      current: 0,
      size: 10,
      list: [],
      visible: false,
      whyTypeList,
      form: {
      },
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        whyName: [{ required: true, message: '请输入', trigger: 'blur' }],
        status: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns,
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
        // onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize)
      },
      queryParam: {
        type: '1'
      },

      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const data = {
          ...this.queryParam,
          current: parameter.pageNo,
          size: parameter.pageSize
        }
        return whyPage(data).then(res => {
          if (res.code === 200) {
            const { records, total, size, current } = res.data
            const data = {
              page: {
                count: total,
                pageNo: current,
                pageSize: size,
                pages: Math.ceil(total / size)
              },
              data: records
            }
            this.current = current
            this.size = size
            this.list = records
            return data
          } else {
            this.$message.error(res.msg || res.message)
            const data = {
              page: {
                count: 0,
                pageNo: 0,
                pages: 0
              },
              data: []
            }
            this.list = []
            this.current = 0
            this.size = 10
            return data
          }
        })
      }
    }
  },
  created() {},
  computed: {},
  mounted() {},
  watch: {},
  methods: {
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.visible = false
          const { type, id } = this.form
          const whyAddOrUpdate = id ?  whyUpdate : whyAdd
          const data = {
            ...this.form,
           applyScenario: this.whyTypeList.filter(e => e.id == type)[0].name
          }
          whyAddOrUpdate(data).then(res => {
            this.form = {}
            if (res.code === 200) {
              this.$refs.table.refresh(true)
            } else {
              this.$message.error(res.msg || res.message)
            }
          }).catch(err => {
            this.form = {}
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    // 删除
    handleDelet(id) {
      const data = {
        id
      }
      whyDelete(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh(true)
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 上移
    handleUp(index, id) {
      // if (index === 0) return
      const data = {
        id,
        mark: 0,
        current: this.current,
        size: this.size
      }
      whyModifySort(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 下移
    handleDown(index, id) {
      // if (index === this.list.length - 1) return
      const data = {
        id,
        mark: 1,
        current: this.current,
        size: this.size
      }
      whyModifySort(data).then(res => {
        if (res.code === 200) {
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },

    // 新增/编辑配置
    handleAddOrEdit(e) {
      this.form = e
      this.visible = true
    },

    // 关闭弹窗
    handleCancel() {
      this.visible = false
    },


    //查询
    onSearch(obj) {
      this.queryParam = obj
      this.$refs.table.refresh(true)
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-tabs-bar {
  margin-bottom: 0;
}

.img {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  border: 1px dashed #f5f5f5;
  object-fit: scale-down;
  cursor: pointer;
}

.remarks {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  word-break: break-all; /* 追加这一行代码 */
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
</style>
